<template>
  <template>
    <a-scene>
      <a-assets>
        <img id="sky" :src="imgSrc" />
      </a-assets>

      <a-sky src="#sky" rotation="0 0 0"></a-sky>

      <a-text
        font="kelsonsans"
        value="Shenzhen"
        width="6"
        position="-2.5 0.25 -1.5"
        rotation="0 0 0"
      ></a-text>
    </a-scene>
    <!-- <img :src="imgSrc" />
  <span>{{ imgCount }}</span> -->
    <canvas v-show="false" id="mapCanvas" ref="mapCanvas"></canvas>
  </template>
</template>

<script lang="ts">
import { ref, defineComponent, onMounted, getCurrentInstance } from 'vue'
export default defineComponent({
  props: ['panoId'],
  emits: ['load', 'finish'],
  setup(props) {
    const imgSrc = ref('')
    const imgCount = ref(0)
    const ZOOM = 5
    const IMAGE_SIZE = 512
    const instance = getCurrentInstance()
    const getURL = (sid: string, pos: string, zoom: number) => {
      return `http://pcsv0.map.bdimg.com/?qt=pdata&sid=${sid}&pos=${pos}&z=${zoom}`
    }

    onMounted(() => {
      if (instance == null) {
        return
      }
      const canvas = <HTMLCanvasElement>document.getElementById('mapCanvas')
      console.log('canvas', canvas)
      const canvasCtx = canvas.getContext('2d')

      //列数
      const columns = Math.max(1, Math.pow(2, ZOOM - 1))
      //行数
      const rows = Math.max(1, Math.pow(2, ZOOM - 2))

      const imgSum = columns * rows

      canvas.width = columns * 512
      canvas.height = rows * 512

      for (let y = 0; y < rows; y++) {
        for (let x = 0; x < columns; x++) {
          let img = new Image()
          // img.setAttribute('crossOrigin', 'Anonymous')
          img.onload = () => {
            imgCount.value += 1
            canvasCtx?.drawImage(img, x * 512, y * 512)
            if (imgCount.value >= imgSum) {
              imgSrc.value = canvas.toDataURL()
            }
          }
          img.src = getURL(props.panoId, `${y}_${x}`, ZOOM)
        }
      }
    })

    return {
      imgSrc,
      imgCount
    }
  }
})
</script>

<style></style>
